<template>
    <div class="login_container">
        <div class="login_box">
            <!--ref="loginformref1"是引用对象名-->
<!--            <h2 class="color:white;position:absolute;left: 50%;">登  录</h2>-->
            <el-form class="radio_role">
                <el-radio  v-model="role" label="1">管理员</el-radio>
                <el-radio  v-model="role" label="2">教师</el-radio>
                <el-radio  v-model="role" label="3">学生</el-radio>
            </el-form>
            <el-form ref="loginFormRef1" :model="loginform" :rules="loginformrules" label-width="80px"  class="login_form"><!--动态绑定sername-->
                <el-form-item label="用户名" prop="userNumber" style="font-size:25px" placeholder="请输入用户名"><!--prop="userNumber"是指定用户规则-->
                    <el-input v-model="loginform.userNumber" style="width:350px;font-size: 20px;"></el-input>
                </el-form-item>
                <!--密码-->
                <el-form-item label="密码" prop="password" style="font-size:25px">
                    <el-input v-model="loginform.password" type="password" style="width:350px;font-size: 20px;"></el-input>
                </el-form-item>
                <!--按钮-->
                <el-form-item class="btns">
                    <el-button type="primary" @click="addDialogVisible = true">注册</el-button>
                    <el-button type="primary" @click="login">登录</el-button>
                    <el-button type="info" @click="resetloginform">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--注册的对话框-->
        <el-dialog
                title="注册"
                :visible.sync="addDialogVisible"
                width="40%"
                @close="addDialogClosed">
            <!--:before-close="handleClose">-->
            <!--内容主体区域,ref是引用对象名-->
            <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
                <el-form-item label="学生姓名">
                    <el-input v-model="addForm.studentName"></el-input>
                </el-form-item>
                <el-form-item label="学生学号">
                    <el-input v-model="addForm.studentNumber"></el-input>
                </el-form-item>
                <el-form-item label="角色" >
                    <el-select v-model="addForm.role_name" placeholder="请选择角色" style="display: block;">
                        <el-option label="学生" value="学生"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学院" prop="college">
                    <el-select v-model="addForm.college" placeholder="请选择学院" style="display: block;">
                        <el-option label="商学院" value="商学院"></el-option>
                        <el-option label="法学院" value="法学院"></el-option>
                        <el-option label="马克思主义学院" value="马克思主义学院"></el-option>
                        <el-option label="教师教育学院" value="教师教育学院"></el-option>
                        <el-option label="体育学院" value="体育学院"></el-option>
                        <el-option label="人文与传媒学院" value="人文与传媒学院"></el-option>
                        <el-option label="宁波大学昂热大学联合学院/中欧旅游与文化学院" value="宁波大学昂热大学联合学院/中欧旅游与文化学院"></el-option>
                        <el-option label="外国语学院" value="外国语学院"></el-option>
                        <el-option label="潘天寿建筑与艺术设计学院" value="潘天寿建筑与艺术设计学院"></el-option>
                        <el-option label="音乐学院" value="音乐学院"></el-option>
                        <el-option label="古陶瓷艺术学院" value="古陶瓷艺术学院"></el-option>
                        <el-option label="物理科学与技术学院" value="物理科学与技术学院"></el-option>
                        <el-option label="数学与统计学院" value="数学与统计学院"></el-option>
                        <el-option label="材料科学与化学工程学院" value="材料科学与化学工程学院"></el-option>
                        <el-option label="机械工程与力学学院" value="机械工程与力学学院"></el-option>
                        <el-option label="信息科学与工程学院" value="信息科学与工程学院"></el-option>
                        <el-option label="土木与环境工程学院" value="土木与环境工程学院"></el-option>
                        <el-option label="海运学院" value="海运学院"></el-option>
                        <el-option label="食品与药学学院" value="食品与药学学院"></el-option>
                        <el-option label="医学院" value="医学院"></el-option>
                        <el-option label="继续教育学院/网络教育学院" value="继续教育学院/网络教育学院"></el-option>
                        <el-option label="科学技术学院" value="科学技术学院"></el-option>
                        <el-option label="国际交流学院" value="国际交流学院"></el-option>
                        <el-option label="阳明学院" value="阳明学院"></el-option>
                        <el-option label="其它" value="其它"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="专业">
                    <el-input v-model="addForm.major"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                <el-input v-model="addForm.password"></el-input>
            </el-form-item>
            </el-form>
            <!--底部按钮区-->
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button><!--点击取消隐藏对话框-->
                <el-button type="primary" @click="addStudent">确 定</el-button><!--点击确定也会隐藏对话框-->
            </span>
        </el-dialog>
    </div>

</template>

<script>
export default {
    data(){
        return{
            role:'1',
            //这是登录表单的数据绑定对象
            loginform:{
                userNumber:'admin1',
                password:"123456",
            },
            //表单的验证规则对象
            loginformrules:{
                userNumber:[
                    { required: true, message: '请输入用户名', trigger: 'blur' },//鼠标移开不填的情况
                    { min: 1, max: 25, message: '长度在 1 到 25 个字符', trigger: 'blur' }
                ],
                password:[
                    { required: true, message: '请输入密码', trigger: 'blur' },//鼠标移开不填的情况
                    { min: 6, max: 25, message: '长度在 6 到 25 个字符', trigger: 'blur' }
                ]
            },
            addForm:{},
            a:'123',
            addDialogVisible:false,
            addFormRules: {
                userNumber: [
                    //不知道为啥，下面这行有点问题，怎么输出都输出请输入用户名
                    {required: true, message: '请输入用户名', trigger: 'blur'},//鼠标移开不填的情况
                    {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'},//鼠标移开不填的情况
                    {min: 6, max: 15, message: '长度在 6 到 15 个字符之间', trigger: 'blur'}
                ],
                email: [
                    {required: true, message: '请输入邮箱', trigger: 'blur'},//鼠标移开不填的情况
                    // {validator: checkEmail, trigger: 'blur'}
                ],
                mobile: [
                    {required: true, message: '请输入手机号', trigger: 'blur'},//鼠标移开不填的情况
                    // {validator: checkMobile, trigger: 'blur'}//上面定义的正则表达式
                ]
            },//添加表单的验证规则对象
        };
    },
    methods:{
        addDialogClosed(){
            this.$refs.addFormRef.resetFields()
        },
        resetloginform(){
            // console.log(this);//打印的是这个组件的实例
            this.$refs.loginFormRef1.resetFields();
        },
        async login(){//表单预验证，如果正确点击登录就可以通过，不正确就会输出错误的情况
            //console.log(this.a);
            console.log("角色是");
            console.log(this.role);

                // const {data: res} = await this.$http.post('stulogin', this.$qs.stringify({
                //         a:this.a,
                //     })
                // )


            this.$refs.loginFormRef1.validate(async valid =>{//第一个形参是一个bool值
                // console.log(valid);
                if(!valid) return;
                // 要请求服务器，要开启mysql
                //不加await会出现promise,用了await会出现一个数据
                console.log(this.loginform.userNumber);
                console.log(this.loginform.password);
                // const { data: res } = await this.$http.post('login', this.$qs.stringify({
                //     userNumber:this.loginform.userNumber,
                //     password:this.loginform.password
                // }))//可以用axios，在data中有一个loginForm表单对象，可以把loginform当做请求参数，用axios发起请求服务请求
                if(this.role==='3') {
                    const {data: res} = await this.$http.post('stuLogin', this.$qs.stringify(this.loginform))//可以用axios，在data中有一个loginForm表单对象，可以把loginform当做请求参数，用axios发起请求服务请求
                    // 可以发起登录的请求
                    // console.log(result);
                    if (res.flag !== "ok") return this.$message.error('用户名不存在或密码错误，或是角色信息有误');
                    this.$message.success('登陆成功');

                    // console.log("输出登录成功获取的flag和登录的用户本身");
                    // console.log(res);//res里面的data里面有一个token
                    this.GLOBAL.currentUser = res.user
                    console.log('登录的学生是');
                    console.log(res.user);
                    //1.将登录成功之后的token，保存到客户端的sessionStorage中
                    //1.1项目中除了登录之外的其他API借楼，必须在登陆之后从能访问
                    //1.2token只应在当前网页打开期间生效，所以将token保存在sessionstorage中
                    window.sessionStorage.setItem('user', res.user);
                    window.sessionStorage.setItem('flag', res.flag); // session 放置
                    //2.通过编程式导航跳转到后台主页，路由地址是/home
                    this.$router.push('/home');//为路由提供地址
                }
                if(this.role==='2') {
                    const {data: res} = await this.$http.post('teaLogin', this.$qs.stringify(this.loginform))//可以用axios，在data中有一个loginForm表单对象，可以把loginform当做请求参数，用axios发起请求服务请求
                    // 可以发起登录的请求
                    // console.log(result);
                    if (res.flag !== "ok") return this.$message.error('用户名不存在或密码错误，或是角色信息有误');
                    this.$message.success('登陆成功');

                    // console.log("输出登录成功获取的flag和登录的用户本身");
                    // console.log(res);//res里面的data里面有一个token
                    this.GLOBAL.currentUser = res.user
                    console.log(res.user);
                    //1.将登录成功之后的token，保存到客户端的sessionStorage中
                    //1.1项目中除了登录之外的其他API借楼，必须在登陆之后从能访问
                    //1.2token只应在当前网页打开期间生效，所以将token保存在sessionstorage中
                    window.sessionStorage.setItem('user', res.user);
                    window.sessionStorage.setItem('flag', res.flag); // session 放置
                    //2.通过编程式导航跳转到后台主页，路由地址是/home
                    this.$router.push('/home');//为路由提供地址
                }
                if(this.role==='1') {
                    const {data: res} = await this.$http.post('adminLogin', this.$qs.stringify(this.loginform))//可以用axios，在data中有一个loginForm表单对象，可以把loginform当做请求参数，用axios发起请求服务请求
                    if (res.flag !== "ok") return this.$message.error('用户名不存在或密码错误，或是角色信息有误');
                    this.$message.success('登陆成功');
                    this.GLOBAL.currentUser = res.user
                    console.log(res.user);
                    window.sessionStorage.setItem('user', res.user);
                    window.sessionStorage.setItem('flag', res.flag); // session 放置
                    this.$router.push('/home');//为路由提供地址
                }
            });
        },
        // regi(){
        //     this.$router.push('/register');//为路由提供地址
        // },
        addDialogClosed(){
            this.$refs.addFormRef.resetFields()
        },
        addStudent(){
            this.$refs.addFormRef.validate(async valid => {
                // console.log("打印添加的用户");
                // console.log(valid);
                if (!valid) return
                //可以发起添加用户的网络请求
                //请求添加是post
                const {data: res} = await this.$http.post('addStudent', this.addForm)
                // console.log(res);
                this.$message.success('添加用户成功！')
                //隐藏用户
                this.addDialogVisible = false
                this.getUserList()

            })
        }
    }
};
</script>

<style scoped>
    h1 {
        color:white;
        font-size:40px;
        position:absolute;/*可以用坐标标记*/
        left: 50%;
        top: 25%;
        transform: translate(-50%, -50%);/*放置到正中间*/
    }
    h2{
        color:white;
        position:absolute;/*可以用坐标标记*/
        left: 50%;
        top: 30%;
        transform: translate(-50%, -50%);/*放置到正中间*/
    }
    .login_container{
        background: url('../../src/assets/cy.jpg')  no-repeat scroll top right  #D5CCBD;
        background-size: cover;
        height:100vh;
    }

    /*登陆的那个框框*/
    .login_box{
        width:500px;
        height:330px;
        background-color: rgba(255,255,255,0.7);
        border-radius: 3px;
        position:absolute;/*可以用坐标标记*/
        left: 50%;
        top: 55%;
        transform: translate(-50%, -50%);/*放置到正中间*/
    }
    .radio_role{
        position:absolute;/*可以用坐标标记*/
        left: 50%;
        top: 22%;
        transform: translate(-50%, -50%);/*放置到正中间*/
    }
    .btns{
        display: flex;/*水平居于有对齐*/
        justify-content: flex-end;
    }
    .login_form{
        position:absolute;
        top:30%;
        bottom:0;
        width:100%;
        padding:0 20px;
        box-sizing:border-box;
    }

</style>
